<template>
	<view>
		<u-form style="padding: 20rpx;background-color: #fff;">
			<u-form-item label="编号"><text>{{accountInfo.account_id}}</text></u-form-item>
			<u-form-item label="姓名"><text>{{accountInfo.accountName}}</text></u-form-item>
			<u-form-item label="状态">
				<view style="display: flex;align-items: center;width: 100%;">
					<view>{{accountInfo.hxt_status | hxtStatusFilter}}</view>
					<u-button v-if="accountInfo.account_id && accountInfo.hxt_status == 0" type="warning" size="mini" @click="openAccountModal" style="margin-left: 20rpx;">激活</u-button>
				</view>
			</u-form-item>
		</u-form>

		
		<u-collapse v-if="bankCardList.length > 0" :item-style="{backgroundColor: '#fff',margin:'2rpx 0',padding:'0 10rpx'}" style="background-color: #cccccc;margin-top: 40rpx;" :body-style="{height:'80rpx'}">
			<u-collapse-item  v-for="(item, index) in bankCardList" :key="index">
				<view style="width:100%" slot="title-all">
					<view style="font-size: 14pt;margin-bottom: 20rpx;">{{item.account_code}}</view>
					<view v-line-clamp="1" style="font-size: 9pt;">{{item.account_name}}</view>
					
					<view style="display: flex;justify-content: space-between;margin-top: 20rpx;width: 100%;">
						<view>{{formatTimeToStr(item.created_at)}}</view>
						<view style="color:green;display: flex;align-item:center;" v-if="item.is_default == 1">
							<u-icon name="checkmark-circle-fill" style="font-size: 15pt;"></u-icon>
							<view style="margin-left: 10rpx;">默认</view>
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: space-around;align-items: center;height: 80rpx;">
					<view style="color:#FF7104" @click="changeDefaultBankCard(item)">设为默认</view>
					<view style="color: red;" @click="removeBankCard(item)">删除</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		<view v-else style="text-align: center;padding-top: 40rpx;">暂无银行卡信息~</view>

		<view class='bottom-fixed-btn' @click="openCreateBankCard">添加银行卡</view>
		
		<u-modal v-model="accountModal.visible" ref="confirmAccount" title="激活账户" width="90%" show-cancel-button confirm-text="确认激活" @confirm="confirmAccount" async-close z-index='11'>
			<view class="slot-content">
				<u-form style="padding: 40rpx;" :model="accountModal.form" ref="accountForm" label-position="top">
					<u-form-item label="银行卡号" required prop="accountCode"><u-input v-model="accountModal.form.accountCode" placeholder="请输入银行卡号" /></u-form-item>
					<u-form-item label="开户姓名" required prop="accountName"><u-input v-model="accountModal.form.accountName" placeholder="请输入银行卡开户姓名"/></u-form-item>
					<u-form-item label="身份证号码" required prop="idCode"><u-input v-model="accountModal.form.idCode"  placeholder="请输入开户人身份证号码" /></u-form-item>
					<u-form-item label="银行卡关联手机号" required prop="tel"><u-input v-model="accountModal.form.tel" placeholder="请输入银行卡绑定手机号"/></u-form-item>
				</u-form>
				<view @click='autoAccountData' style="text-align: center;padding-bottom: 40rpx;font-size: 10pt;color:#ff7104;text-decoration: underline;">填入兰亭实名信息与默认银行卡</view>
			</view>
		</u-modal>
		
		<u-modal v-model="createCardModal.visible" title="添加银行卡" width="90%" show-cancel-button confirm-text="确认添加" @confirm="confirmCreateCard" async-close>
			<view class="slot-content">
				<u-form style="padding: 40rpx;" :model="createCardModal.form" ref="createCardForm" label-position="top">
					<u-form-item label="银行卡号" required prop="accountCode"><u-input v-model="createCardModal.form.accountCode" placeholder="请输入银行卡号" /></u-form-item>
					<u-form-item label="银行卡关联手机号" required prop="tel"><u-input v-model="createCardModal.form.tel" placeholder="请输入银行卡绑定手机号"/></u-form-item>
					<u-form-item label="默认结算卡" prop="is_default" label-width="200" label-position="left">
						<u-switch slot="right" size="40" v-model="createCardModal.form.is_default"></u-switch>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	export default{
		data(){
			return {
				accountInfo:{
					account_id:'',
					accountName:'',
					hxt_status:'0'
				},	
				bankCardList:[],
				accountModal:{
					visible:false,
					form:{
						accountCode:'',
						accountName:'',
						idCode:'',
						tel:''
					},
					rules:{
						accountCode: [
							{required: true,message: '请输入银行卡号',trigger: ['change','blur']}
						],
						accountName: [
							{required: true,message: '请输入姓名',trigger: ['change','blur']}
						],
						idCode:[
							{required: true,message: '请输入身份证号码',trigger: ['change','blur']},
							{
								validator: (rule, value, callback) => {
									if(this.accountModal.form.idCode.length == 18){
										return true;
									}else{
										return false;
									}
								},message: '请输入18位的身份证号码',trigger: ['change','blur'],
							}
						],
						tel:[
							{required: true,message: '请输入手机号码',trigger: ['change','blur']},
							{
								validator: (rule, value, callback) => {
									const reg = /0?(13|14|15|16|17|18|19)[0-9]{9}/
									if (!reg.test(value)) {
										return false;
									}
									return true;
								},message: '错误的手机号码',trigger: ['change','blur'],
							}
						]
					}
				},
				createCardModal:{
					visible:false,
					form:{
						accountCode: '',
						tel: '',
						is_default: false
					},
					rules:{
						accountCode: [
							{required: true,message: '请输入银行卡号',trigger: ['change','blur']}
						],
						tel:[
							{required: true,message: '请输入手机号码',trigger: ['change','blur']},
							{
								validator: (rule, value, callback) => {
									const reg = /0?(13|14|15|16|17|18|19)[0-9]{9}/
									if (!reg.test(value)) {
										return false;
									}
									return true;
								},message: '错误的手机号码',trigger: ['change','blur'],
							}
						]
					}
				},
				
			}
		},
		async onLoad(){
			await this.getHxtAccountInfo();
			await this.getBankCardList();
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			}
		},
		methods:{
			//获取结算账户信息
			async getHxtAccountInfo(){
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.hxtAccountInfo,showLoading:true});
				if(res.code !== 0){
					return self.$http.toast(res.msg);
				}
				self.accountInfo.account_id = res.data.account_id;
				self.accountInfo.accountName = res.data.extend.accountName ?? '';
				self.accountInfo.hxt_status = res.data.hxt_status;
			},
			
			//加载兰亭实名信息
			async autoAccountData(){
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.lantingUserRealData,showLoading:true})
				if(res.code === 0){
					this.accountModal.form.accountCode = res.data.bank_account;
					this.accountModal.form.accountName = res.data.realname;
					this.accountModal.form.idCode = res.data.cert_no;
					this.accountModal.form.tel = res.data.mobile;
				}
			},
			
			//获取银行卡列表信息
			async getBankCardList(){
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.hxtBankCardList,showLoading:true})
				if(res.code === 0){
					this.bankCardList = res.data;
				}
			},
			
			
			//激活账户
			openAccountModal(){
				this.accountModal.visible = true;
				this.$nextTick(function(){
					this.$refs.accountForm.setRules(this.accountModal.rules);
				})
			},
			confirmAccount(){
				let self = this;
				self.$refs.accountForm.validate(async valid => {
					if (valid) {
						let res = await self.$http.request({url:self.$api.hxt.hxtAccountOpen,data:self.accountModal.form,method:'post',showLoading:true});
						if(res.code != 0){
							uni.showModal({title:"温馨提示",content:res.msg})
							this.$refs.confirmAccount.clearLoading();
							return ;
						}
						this.accountModal.visible = false;
						this.getHxtAccountInfo();
						this.getBankCardList();
					}
				});
			},
			
			//添加银行卡
			openCreateBankCard(){
				if(this.accountInfo.hxt_status == 0) {
					return this.$http.toast("您需要先激活账户！");
				}
				this.createCardModal.visible = true;
				this.$nextTick(function(){
					this.$refs.createCardForm.setRules(this.createCardModal.rules);
				})
			},
			confirmCreateCard(){
				if(this.accountInfo.hxt_status == 0) {
					return this.$http.toast("您需要先激活账户！");
				}
				let self = this;
				self.$refs.createCardForm.validate(async valid => {	
					if(valid){
						let data = Object.assign({},this.createCardModal.form);
						data.is_default = data.is_default ? 1 : 0;
						let res = await self.$http.request({url:self.$api.hxt.hxtCreateBalanceCard,data,method:'post',showLoading:true});
						if(res.code != 0){
							return self.$http.toast(res.msg);
						}
						self.$http.toast('添加成功！');
						this.createCardModal.visible = false;
						this.createCardModal.form = {
							accountCode: '',
							tel: '',
							is_default: false
						}
						this.getBankCardList();
					}
				})
			},
		
			
			//修改默认结算卡
			async changeDefaultBankCard(row){
				if(row.is_default == 1){
					return this.$http.toast('该银行卡已经是默认的结算卡！');
				}
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.hxtChangeDefaultBankCard,data:{id:row.id},method:"post",showLoading:true})
				if(res.code != 0){
					return self.$http.toast(res.msg);
				}
				self.getBankCardList();
			},
			
			//删除银行卡
			removeBankCard(row){
				if(row.is_default == 1){
					return this.$http.toast('不能删除默认的结算卡！');
				}
				let self = this;
				uni.showModal({
					title:"温馨提示",
					content:"您确定要删除该银行卡吗？",
					success: async function (res) {
						if (res.confirm) {
							let res = await self.$http.request({url:self.$api.hxt.hxtRemoveBankCard,data:{id:row.id},method:"post",showLoading:true});
							if(res.code != 0){
								return self.$http.toast(res.msg);
							}
							self.getBankCardList();
						}
					}
				})
			}
		},
		filters:{
			hxtStatusFilter(status){
				const statusMap = {
					'0': '未认证',
					'1': '审核通过',
				};
				return statusMap[status] ?? '异常'
			}
		}
	}
</script>

<style lang="scss">
	.bottom-fixed-btn{
		width: 100vw;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
		z-index: 9;
		background-color: #FF7104;
		color:#fff;
		font-size: 12pt;
		font-weight: 600;
	}
</style>